<script setup>
import { ref, computed, useTemplateRef, provide, onMounted, watchEffect } from 'vue'
import jiajian from '@/components/jiajian.vue';
import axios from 'axios';
import { showDialog } from '@/components/Util';
import { useRouter, RouterLink } from 'vue-router';
let router = useRouter();//路由对象 用来做路由跳转

let list = ref([]);
function aa() {
    axios.get('/api/list_shoppingCart').then(res => {
        console.log(res);
        if (res.data.status == 200) {
            list.value = res.data.data;
        }
    })
}
onMounted(() => {
    aa()
})
//修改数量
function gs(id, g) {
    axios.put('/api/update_shoppingCart/' + id + '/' + g, {
        headers: {
            "Content-Type": "application/json"
        }
    }).then(res => {
        aa();
    })
}
// 总价钱
const totalPrice = computed(() => {
    return list.value.reduce((acc, item) => acc + item.qian * item.shuliang, 0);
});
//总数量
const tota = computed(() => {
    return list.value.reduce((acc, item) => acc + item.shuliang, 0);
});
//删除商品
function sc(id) {
    showDialog({ msg: '确认删除？' }).then(res => {
        axios.delete('/api/remove_shoppingCart/' + id).then(res => {
            if (res.data.status == 200) {
                aa();
            }
        })
    })
}
let obj = {}
let jq=ref()
let aaa={}
//支付
function zf() {
    list.value.forEach(item => {
    obj=item;
    jq=obj.qian*obj.shuliang;
    aaa={name:obj.name,jsid:obj.jsId,sl:obj.shuliang,spid:obj.spId,jq:jq}
    axios.put('/api/update_shoppingUser',aaa,{
        headers: {
            "Content-Type": "application/json"
        }
    }).then(res=>{
        console.log(res);
    })
});
}
</script>
<template>
    <div class="box">
        <h2>我的购物车</h2>
        <ul class='no1'>
            <li>
                <div>商品</div>
                <div>单价</div>
                <div>数量</div>
                <div>价钱</div>
                <div>操作</div>
            </li>
        </ul>
        <ul class="no2">
            <li v-for="item in list">
                <div :title="item.name">
                    <img :src="'/src/assets/image/' + item.tu + '.jpg'" alt="">
                    {{ item.name }}
                </div>
                <div>￥{{ item.qian }}</div>
                <div>
                    <input type="number" :value="item.shuliang" @click="gs(item.id, $event.target.value)">
                </div>
                <div>{{ item.qian * item.shuliang }}</div>
                <div><button @click="sc(item.id)">删除</button></div>
            </li>
        </ul>
        <div class="botton">
            <div>共{{ tota }}商品，共{{ totalPrice }}元。</div>
            <div @click="zf">去支付</div>
        </div>
    </div>
</template>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.box {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    background-color: white;
}

h2 {
    text-align: center;
}

.no1>li {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.no1>li>div {
    font-size: 14px;
    width: 70px;
    text-align: center;
    border: 1px solid red;
}

.no2>li {
    display: flex;
    justify-content: space-between;
}

.no2>li>div {
    font-size: 14px;
    width: 70px;
    border: 1px solid red;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}

.no2>li>div>input {
    width: 60px;
}

div>img {
    width: 20px;
    height: 20px;
}

.botton {
    display: flex;
}

.botton>div:nth-child(1) {
    flex: 1;
    background-color: rgb(242, 255, 0);
    text-align: center;
    line-height: 35px;
    border-radius: 10px 0 0 10px;
}

.botton>div:nth-child(2) {
    width: 60px;
    background-color: aqua;
    text-align: center;
    line-height: 35px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}
</style>